import React from 'react';
import { connect } from 'dva/index';
import { Col, Form, Input, InputNumber, Row, Tabs, Icon, Upload, Select, Checkbox, Radio, DatePicker } from 'antd';

const { TabPane } = Tabs;
const CheckboxGroup = Checkbox.Group;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;

const DeliveryReceiptInfo = Form.create()(
  class CreateForm extends React.Component {
    // eslint-disable-next-line no-useless-constructor
    constructor(props: any) {
      super(props);
    }

    handleExportBillOfLading = (p: this) => {}

    ExportBillOfLading = () => {}

    handleCollectForm = () => {}

    checkOrderSupplementInfo = () => {}

    onAnalysisFile = () => {}

    render() {
      // @ts-ignore
      const { getFieldDecorator } = this.props.form;
      const formItemLayout = { labelCol: { span: 8 }, wrapperCol: { span: 14 } };
      const formItemLayout2 = { labelCol: { span: 4 }, wrapperCol: { span: 19 } };
      const formItemLayout3 = { labelCol: { span: 1 }, wrapperCol: { span: 22 } };

      return (
        <div>
          <Form>
            <Tabs tabPosition="top">
              <TabPane tab="服务项目信息" key="1">
                <Row>
                  <Col span={21}>
                    <FormItem {...formItemLayout2} label="海运服务">
                      {getFieldDecorator('shipping', {
                        initialValue: '',

                      })(
                        <RadioGroup style={{ width: 800 }}>
                          <Radio value="1">海运整柜</Radio>
                          <Radio value="2">海运散货</Radio>
                          <Radio value="3">整柜双清</Radio>
                          <Radio value="4">散货双清</Radio>
                        </RadioGroup>,
                      )}
                    </FormItem>
                  </Col>

                </Row>
                  <Row>
                    <Col span={21}>
                      <FormItem {...formItemLayout2} label="空运服务">
                        {getFieldDecorator('airFreight', {
                          initialValue: '',
                        })(
                          <RadioGroup style={{ width: 800 }}>
                            <Radio value="1">空运</Radio>
                            <Radio value="2">快递</Radio>
                            <Radio value="3">空派</Radio>
                          </RadioGroup>,
                        )}
                      </FormItem>
                    </Col>
                  </Row>

                <Row>
                  <Col span={21}>
                    <FormItem {...formItemLayout2} label="港前服务">
                      {getFieldDecorator('portService', {
                        initialValue: '',
                      })(
                        <CheckboxGroup style={{ width: 800 }}>
                          <Checkbox value="1" >拖车</Checkbox>
                          <Checkbox value="2" >报关</Checkbox>
                          <Checkbox value="3" >仓库内装</Checkbox>
                        </CheckboxGroup>,
                      )}
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span={21}>
                    <FormItem {...formItemLayout2} label="增值服务">
                      {getFieldDecorator('vasService', {
                        initialValue: '',
                      })(
                        <CheckboxGroup style={{ width: 800 }}>
                          <Checkbox value="1" >产地证</Checkbox>
                          <Checkbox value="2" >保险</Checkbox>
                          <Checkbox value="3" >商检</Checkbox>
                        </CheckboxGroup>,
                      )}
                    </FormItem>
                  </Col>
                </Row>
              </TabPane>
            </Tabs>


            <Tabs tabPosition="top">
              <TabPane tab="客户产品/运输信息" key="1">
                <Row>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="货名" hasFeedback>
                      {getFieldDecorator('productName', {
                        rules: [{
                          required: true, message: '请输入货名',
                        }],
                        initialValue: '',
                      })(
                        <Input maxLength={50} />,
                      )}
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="预计装柜时间" hasFeedback>
                      {getFieldDecorator('loadingTime', {
                        rules: [{
                          required: true, message: '请选择预计装柜时间',
                        }],
                        initialValue: '',
                      })(
                        <DatePicker style={{ width: '100%' }} showTime={{ format: 'YYYY-MM-DD' }}
                                    format="YYYY-MM-DD" placeholder="请选择预计装柜时间" />,
                      )}
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="装柜联系人" hasFeedback>
                      {getFieldDecorator('loadingContacts', {
                        rules: [{
                          required: false, message: '请输入装柜联系人',
                        }],
                        initialValue: '',
                      })(
                        <Input maxLength={50} />,
                      )}
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="市场专员" hasFeedback>
                      {getFieldDecorator('marketId', {
                        rules: [{
                          required: true, message: '请选择市场专员',
                        }],
                        initialValue: '',
                      })(
                        <Select >
                          <Select.Option value={0}>annie</Select.Option>
                        </Select>,
                      )}
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="是否有仿牌" hasFeedback>
                      {getFieldDecorator('isReplica', {
                        rules: [{
                          required: true, message: '请选择是否有仿牌',
                        }],
                        initialValue: '',
                      })(
                        <RadioGroup >
                          <Radio value="1">是</Radio>
                          <Radio value="2">否</Radio>
                        </RadioGroup>,
                      )}
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="仿牌多少方" hasFeedback>
                      {getFieldDecorator('replicaCube', {
                        rules: [{
                          required: '请输入仿牌多少方',
                        }],
                        initialValue: '',
                      })(
                        <InputNumber min={0} style={{ width: '100%' }} />,
                      )}
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="是否有监装" hasFeedback>
                      {getFieldDecorator('isLoadingCheck', {
                        rules: [{
                          required: false, message: '请选择是否有监装',
                        }],
                        initialValue: '',
                      })(
                        <RadioGroup >
                          <Radio value="1">是</Radio>
                          <Radio value="2">否</Radio>
                        </RadioGroup>,
                      )}
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="参考重量" hasFeedback>
                      {getFieldDecorator('referenceWeight', {
                        rules: [{
                          required: true, message: '请输入参考重量',
                        }],
                        initialValue: '',
                      })(
                        <InputNumber min={0} style={{ width: '100%' }} />,
                      )}
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span={24}>
                    <FormItem {...formItemLayout2} label="装柜地址" hasFeedback>
                      {getFieldDecorator('area', {
                        rules: [{
                          required: false, message: '请选择装柜地址',
                        }],
                        initialValue: '',
                      })(
                        <Select >
                          <Select.Option value={0}>广东省广州市海珠区江海街道</Select.Option>
                        </Select>,
                      )}
                    </FormItem>
                  </Col>
                </Row>
                <Row>
                  <Col span={24}>
                    <FormItem {...formItemLayout2} label="备注" hasFeedback>
                      {getFieldDecorator('memo', {
                        rules: [{
                          required: false, message: '请输入备注',
                        }],
                        initialValue: '',
                      })(
                        <Input.TextArea maxLength={200} autosize />,
                      )}
                    </FormItem>
                  </Col>
                </Row>
              </TabPane>
            </Tabs>

            <Tabs tabPosition="top">
              <TabPane tab="协议报价与市场底价" key="1">
                <Row>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="起运港" hasFeedback>
                      {getFieldDecorator('loadingPort', {
                        rules: [{
                          required: true, message: '请选择起运港',
                        }],
                        initialValue: '',
                      })(
                        <Select >
                          <Select.Option value={0}>广州南沙</Select.Option>
                        </Select>,
                      )}
                    </FormItem>
                  </Col>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="目的港" hasFeedback>
                      {getFieldDecorator('destinationPort', {
                        rules: [{
                          required: true, message: '请选择目的港',
                        }],
                        initialValue: '',
                      })(
                        <Select >
                          <Select.Option value={0}>那瓦西瓦</Select.Option>
                        </Select>,
                      )}
                    </FormItem>
                  </Col>
                </Row>

                <Row>
                  <Col span={2} style={{ marginLeft: 88 }}>
                    <span>柜型/柜量 :</span>
                  </Col>
                  <Col span={4}>
                    <FormItem {...formItemLayout3}>
                      {getFieldDecorator('size20gp', {
                        initialValue: '',
                      })(
                        <InputNumber min={0} style={{ width: '100%' }} placeholder="数量" />,
                      )}
                    </FormItem>
                  </Col>
                  <Col span={2}>
                    <span>*20GP</span>
                  </Col>
                  <Col span={4}>
                    <FormItem {...formItemLayout3}>
                      {getFieldDecorator('weight20gp', {
                        initialValue: '',
                      })(
                        <InputNumber style={{ width: '100%' }} placeholder="重量" />,
                      )}
                    </FormItem>
                  </Col>
                  <Col span={2}>
                    <span>KGS</span>
                  </Col>
                </Row>
                <Row>
                  <Col span={3} style={{ marginLeft: 50 }}>
                  </Col>
                  <Col span={4}>
                    <FormItem {...formItemLayout3}>
                      {getFieldDecorator('size40gp', {
                        initialValue: '',
                      })(
                        <InputNumber min={0} style={{ width: '100%' }} placeholder="数量" />,
                      )}
                    </FormItem>
                  </Col>
                  <Col span={2}>
                    <span>*40GP</span>
                  </Col>
                  <Col span={4}>
                    <FormItem {...formItemLayout3}>
                      {getFieldDecorator('weight40gp', {
                        initialValue: '',
                      })(
                        <InputNumber style={{ width: '100%' }} placeholder="重量" />,
                      )}
                    </FormItem>
                  </Col>
                  <Col span={2}>
                    <span>KGS</span>
                  </Col>
                </Row>
                <Row>
                  <Col span={3} style={{ marginLeft: 50 }}>
                  </Col>
                  <Col span={4}>
                    <FormItem {...formItemLayout3}>
                      {getFieldDecorator('size40hq', {
                        initialValue: '',
                      })(
                        <InputNumber min={0} style={{ width: '100%' }} placeholder="数量" />,
                      )}
                    </FormItem>
                  </Col>
                  <Col span={2}>
                    <span>*40HQ</span>
                  </Col>
                  <Col span={4}>
                    <FormItem {...formItemLayout3}>
                      {getFieldDecorator('weight40hq', {
                        initialValue: '',
                      })(
                        <InputNumber min={0} style={{ width: '100%' }} placeholder="重量" />,
                      )}
                    </FormItem>
                  </Col>
                  <Col span={2}>
                    <span>KGS</span>
                  </Col>
                </Row>
                <Row>
                  <Col span={2} style={{ marginLeft: 88 }}>
                    <span>重量/体积 :</span>
                  </Col>
                  <Col span={4}>
                    <FormItem {...formItemLayout3}>
                      {getFieldDecorator('totalNum', {
                        initialValue: '',
                      })(
                        <InputNumber min={0} style={{ width: '100%' }} />,
                      )}
                    </FormItem>
                  </Col>
                  <Col span={2}>
                    <span>PKG</span>
                  </Col>
                  <Col span={4}>
                    <FormItem {...formItemLayout3}>
                      {getFieldDecorator('volume', {
                        rules: [{ required: true, message: '请输入体积！' }],
                        initialValue: '',
                      })(
                        <InputNumber min={0} style={{ width: '100%' }} placeholder="体积" />,
                      )}
                    </FormItem>
                  </Col>
                  <Col span={2}>
                    <span>CBM</span>
                  </Col>
                  <Col span={4}>
                    <FormItem {...formItemLayout3}>
                      {getFieldDecorator('volumeWeight', {
                        rules: [{
                          required: true, message: '请输入重量',
                        }],
                        initialValue: '',
                      })(
                        <InputNumber min={0} style={{ width: '100%' }} placeholder="体积重量" />,
                      )}
                    </FormItem>
                  </Col>
                  <Col span={2}>
                    <span>KGS</span>
                  </Col>
                </Row>
                <Row>
                  <Col span={12}>
                    <FormItem {...formItemLayout} label="报价有效期" hasFeedback>
                      {getFieldDecorator('quotationDeadline', {
                        rules: [{
                          required: true, message: '请选择报价有效期',
                        }],
                        initialValue: '',
                      })(
                        <DatePicker
                          style={{ width: '100%' }}
                          showTime={{ format: 'YYYY-MM-DD' }}
                          format="YYYY-MM-DD"
                          placeholder="请选择时间"
                        />,
                      )}
                    </FormItem>
                  </Col>
                </Row>

                <Row>
                  <Col span={24}>
                    <FormItem {...formItemLayout2} label="与客户协议价格" hasFeedback>
                      {getFieldDecorator('cstPriceDesc', {
                        rules: [{
                          required: true, message: '请输入客户协议价格',
                        }],
                        initialValue: '',
                      })(
                        <Input.TextArea maxLength={1000} autosize={{ minRows: 3, maxRows: 9 }} />,
                      )}
                    </FormItem>
                  </Col>
                </Row>

                  <Row>
                    <Col span={24}>
                      <FormItem {...formItemLayout2} label="新增服务项目费用报价" hasFeedback>
                        {getFieldDecorator('newCstPriceDesc', {
                          rules: [{
                            required: false, message: '请输入新增服务项目费用报价',
                          }],
                          initialValue: '',
                        })(
                          // eslint-disable-next-line max-len
                          <Input.TextArea disabled={false} maxLength={1000} autosize={{ minRows: 3, maxRows: 9 }} />,
                        )}
                      </FormItem>
                    </Col>
                  </Row>
                <Row>
                  <Col span={24}>
                    <FormItem {...formItemLayout2} label="公司市场底价" hasFeedback>
                      {getFieldDecorator('companyPriceDesc', {
                        rules: [{
                          required: true, message: '请输入公司市场底价',
                        }],
                        initialValue: '',
                      })(
                        <Input.TextArea maxLength={1000} autosize={{ minRows: 3, maxRows: 9 }} />,
                      )}
                    </FormItem>
                  </Col>
                </Row>

                  <Row>
                    <Col span={24}>
                      <FormItem {...formItemLayout2} label="新增服务项目费用底价" hasFeedback>
                        {getFieldDecorator('newCompanyPriceDesc', {
                          rules: [{
                            required: false, message: '请输入新增服务项目费用底价',
                          }],
                          initialValue: '',
                        })(
                          <Input.TextArea maxLength={1000} autosize={{ minRows: 3, maxRows: 9 }} />,
                        )}
                      </FormItem>
                    </Col>
                  </Row>

               <p><span style={{ color: 'red', marginLeft: 16 }}>如有新增服务项目，请重新计算并填写报价总计和底价总计</span></p>
                <Row>
                  <Col span={6}>
                    <FormItem {...formItemLayout} label="报价总计" hasFeedback>
                      {getFieldDecorator('quoteFee', {
                        rules: [{
                          required: true, message: '请输入报价总计',
                        }],
                        initialValue: '',
                      })(
                        <InputNumber style={{ width: '100%' }} />,
                      )}
                    </FormItem>
                  </Col>
                  <Col span={6}>
                    <FormItem {...formItemLayout} label="底价总计" hasFeedback>
                      {getFieldDecorator('costFee', {
                        rules: [{
                          required: true, message: '请输入底价总计',
                        }],
                        initialValue: '',
                      })(
                        <InputNumber style={{ width: '100%' }} />,
                      )}
                    </FormItem>
                  </Col>
                  <Col span={5}>
                    <span style={{ fontSize: '14px', marginLeft: 20, lineHeight: 2.4 }}>预计毛利润:1102CNY</span>
                  </Col>
                  <Col span={7}>
                    <span style={{ fontSize: '14px', marginLeft: 10, lineHeight: 2.4 }}>预计毛利率: 10%</span>
                  </Col>
                </Row>
              </TabPane>
            </Tabs>

            <Tabs tabPosition="top">
              <TabPane tab="操作注意事项" key="1">
                <Row>
                  <Col span={24}>
                    <FormItem {...formItemLayout2} label="备注" hasFeedback>
                      {getFieldDecorator('announcements', {
                        rules: [{
                          required: true, message: '请输入备注',
                        }],
                        initialValue: '',
                      })(
                        <Input.TextArea maxLength={1000} autosize={{ minRows: 3, maxRows: 9 }} />,
                      )}
                    </FormItem>
                  </Col>
                </Row>
              </TabPane>
            </Tabs>


              <div>
                {/* <Tabs tabPosition="top"> */}
                {/*  <TabPane tab="接单审批" key="1"> */}
                {/*    <Row> */}
                {/*      <Col span={12}> */}
                {/*        <FormItem {...formItemLayout} label="是否接单" hasFeedback> */}
                {/*          {getFieldDecorator('approvalresult', { */}
                {/*            rules: [{ */}
                {/*              required: true, message: '请选择审核结果！', */}
                {/*            }], */}
                {/*            initialValue: '', */}
                {/*          })( */}
                {/*            <Select > */}
                {/*              <Select.Option value="3">是</Select.Option> */}
                {/*              <Select.Option value="4">否</Select.Option> */}
                {/*            </Select>, */}
                {/*          )} */}
                {/*        </FormItem> */}
                {/*      </Col> */}
                {/*      <Col span={12}> */}
                {/*        <FormItem {...formItemLayout} label="备注" hasFeedback> */}
                {/*          {getFieldDecorator('approvalMemo', { */}
                {/*            rules: [{ */}
                {/*              required: true, message: '请输入备注', */}
                {/*            }], */}
                {/*            initialValue: '', */}
                {/*          })( */}
                {/*            // eslint-disable-next-line max-len */}
                {/* eslint-disable-next-line max-len */}
                {/*            <Input.TextArea maxLength={200} autosize={{ minRows: 3, maxRows: 9 }} />, */}
                {/*          )} */}
                {/*        </FormItem> */}
                {/*      </Col> */}
                {/*    </Row> */}
                {/*  </TabPane> */}
                {/* </Tabs> */}
                  <div>
                    <Tabs tabPosition="top">
                      <TabPane tab="供应商分配" key="1">
                        <Row>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="海运供应商" hasFeedback>
                              {getFieldDecorator('shippingSupplierId', {
                                rules: [{
                                  required: true, message: '请选择供应商代码',
                                }],
                                initialValue: '',
                              })(
                                <Select >
                                  <Select.Option value="3">乐达</Select.Option>
                                </Select>,
                              )}
                            </FormItem>
                          </Col>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="拖车供应商" hasFeedback>
                              {getFieldDecorator('trailerSupplierId', {
                                rules: [{
                                  required: true, message: '请选择供应商代码',
                                }],
                                initialValue: '',
                              })(
                                <Select >
                                  <Select.Option value="3">乐达</Select.Option>
                                </Select>,
                              )}
                            </FormItem>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="报关供应商" hasFeedback>
                              {getFieldDecorator('declareSupplierId', {
                                rules: [{
                                  required: true, message: '请选择供应商代码',
                                }],
                                initialValue: '',
                              })(
                                <Select >
                                  <Select.Option value="3">乐达</Select.Option>
                                </Select>,
                              )}
                            </FormItem>
                          </Col>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="空运供应商" hasFeedback>
                              {getFieldDecorator('airSupplierId', {
                                rules: [{
                                  required: true, message: '请选择供应商代码',
                                }],
                                initialValue: '',
                              })(
                                <Select >
                                  <Select.Option value="3">乐达</Select.Option>
                                </Select>,
                              )}
                            </FormItem>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="快递供应商" hasFeedback>
                              {getFieldDecorator('expressSupplierId', {
                                rules: [{
                                  required: true, message: '请选择供应商代码',
                                }],
                                initialValue: '',
                              })(
                                <Select >
                                  <Select.Option value="3">乐达</Select.Option>
                                </Select>,
                              )}
                            </FormItem>
                          </Col>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="保险供应商" hasFeedback>
                              {getFieldDecorator('insuranceSupplierId', {
                                rules: [{
                                  required: true, message: '请选择供应商代码',
                                }],
                                initialValue: '',
                              })(
                                <Select >
                                  <Select.Option value="3">乐达</Select.Option>
                                </Select>,
                              )}
                            </FormItem>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="商检供应商" hasFeedback>
                              {getFieldDecorator('inspectionSupplierId', {
                                rules: [{
                                  required: true, message: '请选择供应商代码',
                                }],
                                initialValue: '',
                              })(
                                <Select >
                                  <Select.Option value="3">乐达</Select.Option>
                                </Select>,
                              )}
                            </FormItem>
                          </Col>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="产地证供应商" hasFeedback>
                              {getFieldDecorator('coSupplierId', {
                                rules: [{
                                  required: true, message: '请选择供应商代码',
                                }],
                                initialValue: '',
                              })(
                                <Select >
                                  <Select.Option value="3">乐达</Select.Option>
                                </Select>,
                              )}
                            </FormItem>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={12}>
                            <FormItem {...formItemLayout} label="仓内装供应商" hasFeedback>
                              {getFieldDecorator('storageSupplierId', {
                                rules: [{
                                  required: true, message: '请选择供应商代码',
                                }],
                                initialValue: '',
                              })(
                                <Select >
                                  <Select.Option value="3">乐达</Select.Option>
                                </Select>,
                              )}
                            </FormItem>
                          </Col>
                            <Col span={12}>
                              <FormItem {...formItemLayout} label="航空公司" hasFeedback>
                                {getFieldDecorator('aviationId', {
                                  rules: [{
                                    required: true, message: '请选择航空公司代码',
                                  }],
                                  initialValue: '',
                                })(
                                  <Select >
                                    <Select.Option value="3">乐达</Select.Option>
                                  </Select>,
                                )}
                              </FormItem>
                            </Col>
                        </Row>
                      </TabPane>
                    </Tabs>

                      <Tabs tabPosition="top">
                        <TabPane tab="订舱消息" key="1">
                          <Row>
                            <Col span={12} style={{ marginBottom: 10, marginLeft: 100 }}>
                              <a href="#" style={{ fontSize: '14px' }}>导出订舱单</a>
                            </Col>
                          </Row>
                          <Row>
                            <Col span={12}>
                              <FormItem {...formItemLayout} label="SO号" hasFeedback>
                                {getFieldDecorator('soNo', {
                                  rules: [{
                                    required: false, message: '请输入SO号',
                                  }],
                                  initialValue: '',
                                })(
                                  <Input maxLength={50} />,
                                )}
                              </FormItem>
                            </Col>
                            <Col span={12}>
                              <FormItem {...formItemLayout} label={<span>上传SO</span>} hasFeedback>
                                <Upload.Dragger>
                                  <p className="ant-upload-drag-icon">
                                    <Icon type="inbox"/>
                                  </p>
                                  <p className="ant-upload-text">多文件请压缩(原文件将被覆盖)</p>
                                </Upload.Dragger>
                              </FormItem>
                            </Col>
                          </Row>
                        </TabPane>
                      </Tabs>
                  </div>
              </div>
          </Form>
        </div>
      )
    }
  })

function mapStateToProps(state: any) {
    return {
      loading: state.loading.models.order, order: state.order,
    };
}

export default connect(mapStateToProps)(DeliveryReceiptInfo);
